<template>
  <div class="channelEdit-page">
    <div class="channel">
       <van-cell title="我的频道">
         <van-button type="default" size="mini" @click="isEdit = !isEdit">{{ !isEdit ? '编辑' : '取消' }}</van-button>
       </van-cell>
       <van-grid :column-num="4">
          <van-grid-item @click="skipChannel(index)" v-for="(item, index) in myChannels" :key="item.id">
            <span>{{ item.name }}</span>
            <van-icon @click="delMyChannel(index)" class="edit-ico" name="cross" v-show="isEdit && item.id !==0" />
          </van-grid-item>
        </van-grid>
    </div>
    <div class="channel">
       <van-cell title="可选频道" />
       <van-grid :column-num="4">
          <van-grid-item @click="addChoiceChannel(item)" v-for="item in choosableChannel" :key="item.id">
            <span>{{ item.name }}</span>
          </van-grid-item>
        </van-grid>
    </div>
  </div>
</template>

<script>
// 频道相关接口
import { getChannelList, updateChannel } from '@/api/channel'
export default {
  name: 'ChannelEdit',
  props: {
    myChannels: {
      type: Array
    }
  },
  // props: ['myChannels'],
  data () {
    return {
      isEdit: false, // 控制编辑频道状态
      allChannels: [] // 所有的频道
    }
  },
  computed: {
    // 计算出 可选频道列表
    choosableChannel () {
      // allChannels：所有频道
      // myChannels: 选中的频道
      // 可选的频道  = 所有频道 - 选中的频道
      // 第一种
      // 算法思路：使用所有频道里面的每一项，去和已选频道中去匹配，能匹配上的该项则不是我们需要的
      // 找不到的则是我们需要的
      // 利用 filter去筛选 所有频道
      // 在已选中频道中 通过 findIndex 查找
      // 注意 filter 和 findIndex方法 return的都是 布尔类型
      // const result = this.allChannels.filter(item => {
      //   // 判断当前项在我们的所有频道列表里，能不能找到
      //   const index = this.myChannels.findIndex(channel => {
      //     return item.id === channel.id
      //   })
      //   console.log(index)
      //   // 找不到的反而是我们需要的，返回出去；列表
      //   return index === -1
      // })
      // return result

      // 第二种
      // 利用filter 和 find 来筛选
      const result = this.allChannels.filter(item => {
        const _item = this.myChannels.find(channl => {
          return item.id === channl.id
        })
        // console.log(_item)
        // 为 undefined 反而都是可选的频道
        // return _item === undefined
        return !_item
      })
      return result
    }
  },
  mounted () {
    this.getAllChannel()
  },
  methods: {
    // 获取所有频道
    getAllChannel () {
      getChannelList().then(res => {
        this.allChannels = res.data.data.channels
      })
    },
    // 点击动画面板里的频道跳转
    skipChannel (index) {
      this.$emit('channel-skip', index)
    },
    // 删除我的频道
    delMyChannel (index) {
      this.myChannels.splice(index, 1)
      // 先修改数据，让数据能符合接口的条件 把推荐去掉 [{id:0, name: '推荐'}] 转换为 [{id: 1, seq: 2}]
      // 使用 map 和filter
      const newArr = this.myChannels.map((channel, index) => {
        return {
          id: channel.id,
          seq: index + 1
        }
      }).filter(item => {
        return item.id !== 0 // 把推荐过滤掉
      })
      updateChannel({ channels: newArr }).then(res => {
        console.log(res)
        this.$toast.success('删除频道成功！')
      })
    },
    // 添加可选的频道
    addChoiceChannel (item) {
      // 直接把点击的当前项，添加到我的频道里
      this.myChannels.push(item)
      // 同步频道
      const newArr = this.myChannels.map((channel, index) => {
        return {
          id: channel.id,
          seq: index + 1
        }
      }).filter(item => {
        return item.id !== 0 // 把推荐过滤掉
      })
      updateChannel({ channels: newArr }).then(res => {
        console.log(res)
        this.$toast.success('添加频道成功！')
      })
    }
  }
}
</script>

<style lang="less" scoped>
.channel {
  font-size: 14px;

  // 频道叉号
  .edit-ico {
    position: absolute;
    top: 0;
    right: 0;
    // font-size: 14px;
    color: red;
  }
}

</style>
